<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>商品档案数据</title>

  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/bootstrapTable/bootstrap-table.min.css">
  <link rel="stylesheet" type="text/css" href="/static/info/css/style.css" />
</head>

<body class="skin">
<div id="templateInfoTable" style="background-color:#fff;color:#000"></div>
<!-- jQuery 3 -->
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap 3.3.7 -->
<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/static/bootstrapTable/bootstrap-table.min.js"></script>
<script src="/static/bootstrapTable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/bootstrapTable/extensions/export/tableExport.min.js"></script>
<script src="/static/bootstrapTable/extensions/export/bootstrap-table-export.min.js"></script>

<script  th:inline="javascript">
	var itemProcessRecordId = [[${itemProcessRecordId}]];
	var templateInfoTable;
	$(function(){
		templateInfoTable = $('#templateInfoTable');
		templateInfoTable.bootstrapTable({
		url : "/originItemProcessRecordTemplateInfoPage",
		striped : true, // 是否显示行间隔色

		search : true,
		//导出
		showExport : true,
        exportOptions:{
            fileName: '用户统计报表',  //文件名称设置
            worksheetName: 'sheet1',  //表格工作区名称
            tableName: '用户统计报表',
            excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
        },

		// 分页相关
		sidePagination : 'server',
		pagination : true, // 是否显示分页（*）
		pageNumber : 1, // 初始化加载第一页，默认第一页,并记录
		pageSize : 10, // 默认显示几条数据 
		pageList : [ 10, 50, 100, 1000], // 用于设置当前页面可以显示的数据条数
		queryParams : function(params) {
			var nparams = {
				'itemProcessRecordId' : itemProcessRecordId,
				'search' : params.search
			};
			return nparams;
		},
		showRefresh : true, // 是否显示刷新按钮
		uniqueId : 'id',
		columns : [ {
			checkbox : false,
			visible : false
		// 是否显示复选框 
		}, {
			field : 'id',
			title : '信息编号',
			width : "10%"
		}, {
			field : 'infoTemplate.dataHeads',
			title : '信息数据',
			width : "90%",
			formatter:function(value,row, index){
				var dataHeads = value.split("#");
				var dataValues = row.dataValues.split("#");
				var heads = "<tr>";
				var values = "<tr>";
				for(var i=0;i<dataHeads.length;i++){
					heads += '<td>'+dataHeads[i]+'</td>';
					values += '<td>'+dataValues[i]+'</td>';
				}
				heads += "</tr>"
				values += "</tr>"
				return '<table border="1" cellspacing="0" cellpadding="5px" align="center" style="width:100%">'+heads+values+'</table>';
			}
		}]
		});
		});
</script>

</body>
</html>
